<template>
  <view class="fastNavBox" :style="[outModuleCss]">
    <view :style="[moduleBgCss]" class="module-bg"></view>
    <view class="fastNav">
      <view class="scroll-x">
        <view class="navList">
          <template v-for="(item, index) in propsData.params.list">
            <template v-if="index == 0">
              <view
                class="navItem choosed1"
                :key="index"
                v-if="propsData.params.choosedStyle.style == 1"
                :style="[propsData.params.choosedStyle.css]"
              >
                {{ item.text }}
                <view
                  class="underLine"
                  v-if="propsData.params.choosedStyle.style == 1"
                  :style="[
                    {
                      backgroundColor: propsData.params.choosedStyle.lineColor,
                    },
                  ]"
                ></view>
              </view>
              <view
                class="navItem choosed2"
                :key="index"
                :style="[
                  propsData.params.choosedStyle.css,
                  {
                    backgroundColor:
                      propsData.params.choosedStyle.backgroundColor,
                  },
                ]"
                v-else
              >
                {{ item.text }}
              </view>
            </template>
            <view
              class="navItem"
              :key="index"
              :style="[propsData.params.css]"
              @click="changeNav(item)"
              v-else
            >
              {{ item.text }}
            </view>
          </template>
        </view>
      </view>
      <view
        class="allNav"
        @click="closeAll"
        @touchmove.stop.prevent="
          (e) => {
            return;
          }
        "
      >
        <text
          class="iconfont icon-arrow-down"
          v-if="!showAll"
          :style="[
            {
              color: propsData.params.css.color,
            },
          ]"
        ></text>
        <text
          class="iconfont icon-arrow-up"
          v-else
          :style="[
            {
              color: propsData.params.css.color,
            },
          ]"
        ></text>
      </view>
    </view>
    <view class="allFastNav" v-if="showAll">
      <view
        :class="['navItem', index == 0 ? 'choosed' : '']"
        :key="index"
        v-for="(item, index) in propsData.params.list"
        @click="changeNav(item)"
      >
        {{ item.text }}
      </view>
    </view>
    <view
      class="all"
      v-if="showAll"
      @click="closeAll"
      :style="{
        height: 'calc(100vh - ' + height + 'px)',
      }"
    ></view>
  </view>
</template>

<script>
import { diyMixin } from "../mixins/diy";

export default {
  name: "fastNav",
  props: {
    propsData: {
      type: Object,
      default: {},
    },
  },
  mixins: [diyMixin],
  data() {
    return {
      showAll: false,
      choosedCurrent: false,
      height: 0,
    };
  },

  mounted() {
    this.getHeight();
  },

  methods: {
    changeNav(e) {
      this.$utils.diySkip(e.link);
    },
    closeAll() {
      if (!this.showAll) {
        this.getHeight();
      }
      this.showAll = !this.showAll;
    },
    getHeight() {
      uni
        .createSelectorQuery()
        .in(this)
        .select(".fastNavBox")
        .boundingClientRect((data) => {
          if (data) this.height = data.height + data.top;
        })
        .exec();
    },
    moveHandle() {
      return false;
    },
  },
};
</script>

<style lang="scss" scoped>
.fastNavBox {
  width: 100%;
  position: relative;
  overflow: inherit !important;
}
.fastNav {
  width: 100%;
  padding: 0 24rpx;
  display: flex;
  .scroll-x {
    flex: 1;
    width: 0;
    overflow-x: auto;
    &::-webkit-scrollbar {
      display: none;
      width: 0 !important;
      height: 0 !important;
      -webkit-appearance: none;
      background: transparent;
    }
  }
  .navList {
    width: 100%;
    padding: 10rpx 0;
    height: 100%;
    display: flex;
    align-items: center;
    white-space: nowrap;
    z-index: 1000;
    .navItem {
      white-space: nowrap;
      position: relative;
      margin-right: 40rpx;
    }
    .underLine {
      position: absolute;
      width: 100%;
      height: 6rpx;
      background-color: #fff;
      bottom: -6rpx;
      left: 0;
    }
    .choosed2 {
      padding: 0 20rpx;
      border-radius: 99px;
      background-color: pink;
    }
    .current {
      cursor: pointer;
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: 100;
    }
    .choosedTab {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      border: 1px solid #1890fc;
    }
  }
  .allNav {
    width: 50rpx;
    min-width: 50rpx;
    height: 100%;
    padding: 8rpx 0;
    display: flex;
    align-items: center;
    justify-content: center;
    .iconfont {
      font-size: 40rpx;
    }
  }
}
.allFastNav {
  position: absolute;
  left: 0;
  width: 100%;
  padding: 24rpx;
  background-color: #fff;
  display: flex;
  border-radius: 0 0 24rpx 24rpx;
  z-index: 1000;
  flex-wrap: wrap;
  .navItem {
    width: 124rpx;
    height: 60rpx;
    border-radius: 30rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f6f6f6;
    font-size: 24rpx;
    color: #999;
    margin-right: 20rpx;
    margin-bottom: 20rpx;
  }
  .navItem:nth-child(5n) {
    margin-right: 0;
  }
  .choosed {
    background-color: #fff;
    color: #ff4400;
    border: 1px solid #ff4400;
  }
}
.module-bg {
  width: 100%;
  height: 100%;
  z-index: -1;
  position: absolute;
  left: 0;
  top: 0;
}
.all {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.5);
}
</style>
